<template>
	<div 
	v-if="shopInfo"
	class="mine-shopsettle-edit-wrap" >
		<van-nav-bar
		  title="商家管理"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		<div class="basic-title" >店铺基础信息</div>
		<div class="shop-ceil" >
			<div class="shop-ceil-label" >
				店铺名称
			</div>
			<div class="shop-ceil-val" >
				{{ shopInfo.name }}
			</div>
		</div>
		<div class="shop-ceil" >
			<div class="shop-ceil-label" >
				店铺地址
			</div>
			<div class="shop-ceil-val" >
				{{ shopInfo.region_name }}
			</div>
		</div>
		<!-- <div class="shop-ceil" >
			<div class="shop-ceil-label" >
				营业时间
			</div>
			<div class="shop-ceil-val" >
				<div class="shop-time" >
					<div 
					@click="showStartPopup = true"
					class="shop-time-start" >
						{{ timeStart }}
					</div>
					—
					<div 
					@click="showEndPopup = true"
					class="shop-time-end" >
						{{ timeEnd }}
					</div>
				</div>
			</div>
		</div> -->
		<div class="shop-ceil" >
			<div class="shop-ceil-label" >
				主营业务
			</div>
			<div class="shop-ceil-val" >
				{{ shopInfo.cate_name }}
			</div>
		</div>
		<!-- <div class="shop-ceil" >
			<div class="shop-ceil-label" >
				让利比例
			</div>
			<div class="shop-ceil-val" >
				{{ shopInfo.subsidy_config_name }}
			</div>
		</div> -->
		
		<!-- <div class="basic-subsity-title" >店铺福利</div>
		<div class="gift-box" >
			<input 
			class="gift-input"
			 maxlength="25" 
			 type="text" 
			 v-model="shopInfo.gift" 
			 placeholder="请输入进店消费时的福利（如有）"
			 />
			<div class="gift-max-len" >{{ shopInfo.gift.length }}/25</div>
		</div>
		<div class="gift-demo" >
			例：进店消费即送XXX
		</div> -->
		
		<div class="basic-shop-title" >
			店铺图片（品牌图标或者门头）
		</div>
		
		<div class="image-title" >
			店铺门头照（品牌图标或者门头）
		</div>
		<div class="upload-ul" >
		    <van-uploader 
		    v-model="cover_url"
		    :max-count="1" 
		    :after-read="afterCoverReadFront"
		    :before-delete="uploadCoverDleteFront"
		    />
		</div>
		
		<!-- <div class="image-title" >
			门店展示照片
		</div>
		<div class="upload-ul" >
		    <van-uploader 
		    v-model="photo_albums"
		    :max-count="9" 
		    :after-read="afterPhotoReadFront"
		    :before-delete="uploadPhotoDleteFront"
		    />
		</div> -->
		
		<!-- <div class="image-title" >
			门店商品照片
		</div>
		
		<div class="good-ul" >
			<div
			v-for="(item, index) in goodList"
			:key="index"
			 class="good-li" >
				<img class="good-li-img" :src="item.cover_url" >
				<div class="good-li-name" >{{ item.name }}</div>
				<div 
				@click="handleToDelete(item)"
				class="van-uploader__preview-delete" >
					<i class="van-icon van-icon-cross van-uploader__preview-delete-icon" ></i>
				</div>
			</div>
			<div 
			@click="showGoodPopup = true"
			class="good-upload" >
				<i class="van-icon van-icon-photograph van-uploader__upload-icon" ></i>
			</div>
		</div> -->
		
		
		
		
		
		
		<div @click="handleToSave" class="save-btn active-btn" >保存</div>
		
		
		
		<van-popup 
		v-model="showStartPopup"  
		position="bottom"
		>
			<van-datetime-picker
			  v-model="timeStart"
			  type="time"
			  title="选择开始时间"
			  :min-hour="0"
			  :max-hour="24"
			  @confirm="showStartPopup = false"
			  @cancel="showStartPopup = false"
			/>
		</van-popup>
		
		<van-popup 
		v-model="showEndPopup"  
		position="bottom"
		>
			<van-datetime-picker
			  v-model="timeEnd"
			  type="time"
			  title="选择结束时间"
			  :min-hour="0"
			  :max-hour="24"
			  @confirm="showEndPopup = false"
			  @cancel="showEndPopup = false"
			/>
		</van-popup>
		
		<van-popup
		v-model="showGoodPopup"  
		position="center"
		round
		closeable
		>
			<div class="good-box" >
				<van-uploader
				v-model="goodImg"
				:max-count="1" 
				:after-read="afterGoodReadFront"
				:before-delete="uploadGoodDleteFront"
				/>
				
				<input class="good-input" placeholder="跟大家介绍下这个商品吧（15字内）" type="text" v-model="goodName" />
				<div @click="handleToGoodUpload" class="good-save-btn" >完成</div>
			</div>
			
		</van-popup>
		
		
	</div>
</template>

<script>
	import { getOssParams, uploadImage, uploadDelete } from "@/api/upload";
	export default {
		data() {
			return {
				id: this.$route.query.id,
				shopInfo: null,
				
				// 封面
				cover_url: [],
				
				// 店铺展示图
				photo_albums: [],
				
				// 商品列表
				goodList: [],
				goodImg: [],
				goodName: '',
				
				timeStart: '',
				timeEnd: '',
				
				showStartPopup: false,
				showEndPopup: false,
				showGoodPopup: false
			}
		},
		created() {
			
			this.getShopInfo();
			
			
			// 商品列表
			this.getGoodList();
			
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			// 门店详情
			getShopInfo() {
				this.$http.get(`/store/manage/${this.id}/info`)
					.then(res => {
						this.shopInfo = res.data;
						
						this.timeStart = res.data.business_time.split(' ~ ')[0];
						this.timeEnd = res.data.business_time.split(' ~ ')[1];
						
						this.cover_url = [{
							url: this.shopInfo.cover_url
						}]
						
						let photo_albums = this.shopInfo.photo_albums.split(',');
							photo_albums.forEach(item => {
								this.photo_albums.push({
									url: item
								})
							})
						
					})
			},
			// 商品列表
			getGoodList() {
				this.$http.get(`/store/manage/${this.id}/product_list`)
					.then(res => {
						this.goodList = res.data;
					})
			},
			// 上传封面正面
			async afterCoverReadFront(file) {
			    try {
			        this.ossParams = await getOssParams(this.$http);
			        // 调用封装的上传函数
			        await uploadImage(file, this.ossParams, this.cover_url);
			
			        this.cover_url = this.cover_url.filter(item => {
			            return item.url
			        })
			        
			    } catch (error) {
			        console.error('处理上传错误:', error);
			    }
			},
			// 删除
			uploadCoverDleteFront(file) {
			    this.cover_url = uploadDelete(file, this.cover_url);
			},
			
			// 上传店铺正面
			async afterPhotoReadFront(file) {
			    try {
			        this.ossParams = await getOssParams(this.$http);
					
			        // 调用封装的上传函数
			        await uploadImage(file, this.ossParams, this.photo_albums);
			
			        this.photo_albums = this.photo_albums.filter(item => {
			            return item.url
			        })
			        
			    } catch (error) {
			        console.error('处理上传错误:', error);
			    }
			},
			// 删除
			uploadPhotoDleteFront(file) {
			    this.photo_albums = uploadDelete(file, this.photo_albums);
			},
			// 上传封面正面
			async afterGoodReadFront(file) {
			    try {
			        this.ossParams = await getOssParams(this.$http);
			        // 调用封装的上传函数
			        await uploadImage(file, this.ossParams, this.goodImg);
			
			        this.goodImg = this.goodImg.filter(item => {
			            return item.url
			        })
			        
			    } catch (error) {
			        console.error('处理上传错误:', error);
			    }
			},
			// 删除
			uploadGoodDleteFront(file) {
			    this.goodImg = uploadDelete(file, this.goodImg);
			},
			// 商品删除
			handleToDelete(item) {
				this.$http.delete(`/store/manage/${this.id}/product_delete/${item.id}`)
					.then(() => {
						
						this.getGoodList();
					})
			},
			// 商品上传
			handleToGoodUpload() {
				if(!this.goodImg.length) {
					this.$toast('请上传商品图片')
					return
				}
				if(!this.goodName.trim()) {
					this.$toast('请输入商品名称')
					return
				}
				
				let params = {};
					params['id'] = 0;
					params['name'] = this.goodName;
					
					// 封面图片
					let goodImg = [];
					this.goodImg.forEach(item => {
					    goodImg.push(item.url)
					})
					
					params['cover_url'] = goodImg.join(',');
				
					this.$http.post(`/store/manage/${this.id}/product_submit`, params)
						.then(res => {
							this.showGoodPopup = false;
							this.goodImg = [];
							this.goodName = '';
							this.getGoodList();
						})
			},
			// 保存
			handleToSave() {
				if(!this.cover_url.length) {
					this.$toast('请上传门店门头照')
					return
				}
				if(!this.photo_albums.length) {
					this.$toast('请上传门店展示照片')
					return
				}
				if(!this.goodList.length) {
					this.$toast('请上传门店商品照片')
					return
				}
				
				let params = {};
					params['id'] = this.id;
					
					// 封面图片
					let cover_url = [];
					this.cover_url.forEach(item => {
					    cover_url.push(item.url)
					})
					
					params['cover_url'] = cover_url.join(',');
					
					// 店铺展示图片
					let photo_albums = [];
					this.photo_albums.forEach(item => {
					    photo_albums.push(item.url)
					})
					
					console.log(this.photo_albums, '99')
					
					params['photo_albums'] = photo_albums.join(',');
					
					params['business_time'] = `${this.timeStart} ~ ${this.timeEnd}`;
					params['gift'] = this.shopInfo.gift;
					
					this.$http.post('/store/manage/update', params)
						.then(() => {
							this.$toast.success('保存成功');
							
							setTimeout(() => {
								this.$router.back()
							}, 500)
						})
			}
			
		}
	}
</script>

<style lang="scss" >
	.mine-shopsettle-edit-wrap{
		min-height: 100vh;
		padding-top: 46px;
		padding-bottom: calc(1.8rem + constant(safe-area-inset-bottom));
		padding-bottom: calc(1.8rem + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.van-hairline--bottom::after{
		    display: none;
		}
		
		.basic-title{
			padding: 0.24rem 0.32rem 0.16rem;
			font-size: 0.28rem;
			font-weight: 500;
			color: #333333;
		}
		.shop-ceil{
			display: flex;
			justify-content: space-between;
			font-size: 0.28rem;
			padding: 0.32rem;
			color: #333333;
			border-bottom: 0.02rem solid #ededed;
			.shop-ceil-label{
				&::before{
					content: '*';
					font-size: 0.28rem;
					color: #F9301B;
				}
			}
			.shop-ceil-val{
				max-width: 5rem;
			}
		}
		
		.save-btn{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0.24rem;
			bottom: calc(0.24rem + constant(safe-area-inset-bottom));
			bottom: calc(0.24rem + env(safe-area-inset-bottom));
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 6.06rem;
			height: 0.88rem;
			margin: auto;
			font-size: 0.32rem;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 0.44rem;
			background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
		}
		
		.basic-subsity-title{
			font-weight: 500;
			font-size: 0.28rem;
			padding: 0.32rem 0.32rem 0.24rem;
			color: #333333;
		}
		
		.gift-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 6.86rem;
			height: 0.88rem;
			margin: auto;
			padding: 0 0.24rem;
			background: #F2F4F5;
			border-radius: 0.16rem;
			box-sizing: border-box;
			.gift-input{
				width: 5.6rem;
				font-size: 0.28rem;
				border: none;
				background-color: transparent;
			}
			.gift-max-len{
				font-size: 0.24rem;
				color: #999999;
			}
		}
		.gift-demo{
			height: 0.34rem;
			margin-top: 0.12rem;
			padding-left: 0.32rem;
			line-height: 0.34rem;
			font-size: 0.24rem;
			color: #F9301B;
		}
		.basic-shop-title{
			height: 0.4rem;
			padding-left: 0.32rem;
			margin-top: 0.32rem;
			line-height: 0.4rem;
			font-size: 0.28rem;
			font-weight: 500;
			color: #333333;
		}
		.image-title{
			height: 0.4rem;
			padding-top: 0.28rem;
			padding-bottom: 0.2rem;
			padding-left: 0.32rem;
			line-height: 0.4rem;
			font-size: 0.28rem;
			font-weight: 400;
			color: #333333;
			&::before{
				content: '*';
				font-size: 0.28rem;
				color: #F9301B;
			}
		}
		.upload-ul{
			padding: 0 0.32rem;
		}
		
		.shop-time{
			display: flex;
			align-items: center;
			.shop-time-start{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.08rem;
				height: 0.48rem;
				margin-right: 0.12rem;
				border: 1px solid #c1c1c1;
			}
			.shop-time-end{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 1.08rem;
				height: 0.48rem;
				margin-left: 0.12rem;
				border: 1px solid #c1c1c1;
			}
		}
		
		.good-ul{
			display: flex;
			padding: 0 0.32rem;
			.good-li{
				position: relative;
				width: 80px;
				height: 80px;
				margin: 0 8px 8px 0;
			}
			.good-li-img{
				width: 80px;
				height: 80px;
				object-fit: cover;
			}
			.good-li-name{
				height: 0.4rem;
				line-height: 0.4rem;
				font-size: 0.24rem;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
		}
		.good-upload{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 80px;
			height: 80px;
			background-color: #f7f8fa;
		}
		
		.good-box{
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 5rem;
			padding: 0.32rem;
			padding-top: 0.6rem;
			.good-input{
				height: 0.6rem;
				width: 4rem;
				color: #333333;
				font-size: 0.24rem;
				margin-top: 0.2rem;
				padding: 0 0.32rem;
				border: 1px solid #ededed;
			}
		}
		
		.good-save-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			height: 0.6rem;
			width: 2rem;
			font-size: 0.28rem;
			color: #FFFFFF;
			margin-top: 0.2rem;
			border-radius: 0.3rem;
			background: linear-gradient( 135deg, #FF5851 0%, #E9011B 100%);
		}
	}
</style>
